<template>
  <div class="industrycourse-wrap">
    <div class="table">
      <div class="left-side table">
        <div class="numz"><div class="num title">序号</div><div class="num" v-for="(item,index) in industryTableData" :key="index">{{index+1}}</div></div>
        <div class="seriesz">
          <div class="series-title">课程系列</div>
          <div class="seriesF">基于行业的应用课程系列</div>
          <div class="seriesS">基础技术课程系列</div>
        </div>
      </div>
      <div class="right-side">
        <div class="table-titlez">
          <div class="table-title" v-for="(item,index) in industryTabTitle.slice(2,7)" :key="index">{{item.name}}</div>
        </div>
        <div class="table-infoz">
          <div class="table-info" v-for="(item,index) in industryTableData" :key="index">
            <!-- <div class="info num">{{item.num}}</div>
            <div class="info series">{{item.CourseSeries}}</div> -->
            <div class="info courseName">{{item.courseName}}</div>
            <div class="info"><img :src="item.bathroom"></div>
            <div class="info"><img :src="item.InjectionMolding"></div>
            <div class="info"><img :src="item.mould"></div>
            <div class="info border-none"><img :src="item.Electronics"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      industryTabTitle: [
        {
          name: '序号',
          val: 'num'
        },
        {
          name: '课程系列',
          val: 'CourseSeries'
        },
        {
          name: '课程名称',
          val: 'courseName'
        },
        {
          name: '卫浴',
          val: 'bathroom'
        },
        {
          name: '注塑',
          val: 'InjectionMolding'
        },
        {
          name: '模具',
          val: 'mould'
        },
        {
          name: '电子',
          val: 'Electronics'
        }
      ],
      industryTableData: [{
          num: 1,
          CourseSeries: '基于行业的应用课程系列',
          courseName: '智能制造企业战略管理',
          bathroom: '/img/talents/specil/gou.png',
          InjectionMolding: '',
          mould: '',
          Electronics: '/img/talents/specil/gou.png'
        }, {
          num: 2,
          CourseSeries: '基于行业的应用课程系列',
          courseName: '产业升级与工程管理',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '/img/talents/specil/gou.png',
          Electronics: '/img/talents/specil/gou.png'
        }, {
          num: 3,
          CourseSeries: '基础技术课程系列',
          courseName: '大数据技术基础',
          bathroom: '/img/talents/specil/gou.png',
          InjectionMolding: '',
          mould: '',
          Electronics: '/img/talents/specil/gou.png'
        }, {
          num: 4,
          CourseSeries: '基础技术课程系列',
          courseName: '大数据实战项目课程',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '',
          Electronics: '/img/talents/specil/gou.png'
        }, {
          num: 5,
          CourseSeries: '基础技术课程系列',
          courseName: '数据平台与架构',
          bathroom: '',
          InjectionMolding: '',
          mould: '/img/talents/specil/gou.png',
          Electronics: ''
        }, {
          num: 6,
          CourseSeries: '基础技术课程系列',
          courseName: '数据库系统设计与原理',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '',
          Electronics: ''
        }, {
          num: 7,
          CourseSeries: '基础技术课程系列',
          courseName: '工业企业网络技术应用',
          bathroom: '/img/talents/specil/gou.png',
          InjectionMolding: '',
          mould: '',
          Electronics: ''
        }, {
          num: 8,
          CourseSeries: '基础技术课程系列',
          courseName: '人工智能导论',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '',
          Electronics: '/img/talents/specil/gou.png'
        }, {
          num: 9,
          CourseSeries: '基础技术课程系列',
          courseName: '工业互联网',
          bathroom: '',
          InjectionMolding: '',
          mould: '/img/talents/specil/gou.png',
          Electronics: ''
        }, {
          num: 10,
          CourseSeries: '基础技术课程系列',
          courseName: '人工智能企业项目实战',
          bathroom: '/img/talents/specil/gou.png',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '',
          Electronics: ''
        }, {
          num: 11,
          CourseSeries: '基础技术课程系列',
          courseName: 'Java Web程序设计 — 基于商城实训项目的和沙箱实验',
          bathroom: '',
          InjectionMolding: '',
          mould: '/img/talents/specil/gou.png',
          Electronics: ''
        }, {
          num: 12,
          CourseSeries: '基础技术课程系列',
          courseName: '前端开发技术与工业应用',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '/img/talents/specil/gou.png',
          Electronics: ''
        }, {
          num: 13,
          CourseSeries: '基础技术课程系列',
          courseName: '基于AppEngine玩转应用开发、工业数字化平台',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '',
          Electronics: ''
        }, {
          num: 14,
          CourseSeries: '基础技术课程系列',
          courseName: '企业级Java编程规范',
          bathroom: '',
          InjectionMolding: '',
          mould: '/img/talents/specil/gou.png',
          Electronics: '/img/talents/specil/gou.png'
        }, {
          num: 15,
          CourseSeries: '基础技术课程系列',
          courseName: '企业级互联网技术分享',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '/img/talents/specil/gou.png',
          Electronics: ''
        }, {
          num: 16,
          CourseSeries: '基础技术课程系列',
          courseName: '网络安全技术基础',
          bathroom: '',
          InjectionMolding: '/img/talents/specil/gou.png',
          mould: '',
          Electronics: ''
        }, {
          num: 17,
          CourseSeries: '基础技术课程系列',
          courseName: 'Java行业应用开发',
          bathroom: '/img/talents/specil/gou.png',
          InjectionMolding: '',
          mould: '/img/talents/specil/gou.png',
          Electronics: ''
        }
      ]
    }
  },
  methods: {
  }
}
</script>
<style lang="stylus" scoped>
.industrycourse-wrap {
  width: 1160px;
  height: 829px;
  margin: 0 auto;
  border: 1px solid #F1F1F1;
  .table {
    display:flex
  }
  .numz {
    .title {
      background: #FAFAFA;
      font-size: 14px;
      color: #666666;
    }
    .num {
      width: 96px;
      border-right: 1px solid #F1F1F1;
      border-bottom: 1px solid #F1F1F1;
      height: 46px;
      line-height: 46px;
      text-indent: 19px;
    }
  }
  .seriesz {
    width: 244px;
    .series-title {
      height: 46px;
      border-right: 1px solid #F1F1F1;
      border-bottom: 1px solid #F1F1F1;
      line-height: 46px;
      background: #FAFAFA;
      text-indent: 19px;
      font-size: 14px;
      color: #666666;
    }
    .seriesF {
      text-indent: 19px;
      height:92px;
      line-height:92px;
      border-right: 1px solid #F1F1F1;
      border-bottom: 1px solid #F1F1F1;
    }
    .seriesS {
      text-indent: 19px;
      border-right: 1px solid #F1F1F1;
      height: 690px;
      line-height:690px;
    }
  }
  .table-titlez {
    height: 46px;
    background: #FAFAFA;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    .table-title {
      width: 91px;
      text-indent: 19px;
      border-right: 1px solid #F1F1F1;
      border-bottom: 1px solid #F1F1F1;
      line-height: 46px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      &:nth-child(1) {
        width: 454px
      }
      &:last-child {
        border-right: none
      }
    }
  }
  .table-infoz {
    .table-info {
      display: flex;
      text-indent: 19px;
      border-bottom: 1px solid #F1F1F1;
      height: 46px;
      line-height: 46px
      .info {
        height: 100%;
        background: #FFFFFF;
        border-right: 1px solid #F1F1F1;
        width: 91px;
      }
      .courseName {
        width: 454px
      }
      .border-none {
        border: none
      }
    }
  }
}
</style>